<!-- 
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * Copyright (c) 2022 APThink David唐 all rights reserved.
 * 版权所有，侵权必究！
 *
 -->
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import log from 'loglevel'
import { del, userparam, query } from '@/api'
import { CommonTree, cache, copyObject, json2array } from '@/utils'
import { type IField } from '@/contants'
import { ColumnSelect, ColumnOperator, SysDataSelect } from '@/components'
import RoleViewDialog from './RoleViewDialog.vue'
import { Role } from './Role'

const dialog = ref()
const ds = reactive({
  fields: new Array<IField>(),
  items: new Array<any>(),
  currentRow: {},
  department: new CommonTree()
})
const qs = reactive({
  departmenttype: undefined,
  scheduletype: undefined
})

onMounted(async () => {
  log.debug('=>department mounted')
  cache.getTableTree("department").then((d: any)=>{
    ds.department = d
  })
  userparam("BrowseDepartment").then((d: any)=>{
    log.debug(d)
    ds.fields = json2array(d);
  })
})

function onFilterClick() {
  query("department", qs).then((d: any)=>{
    ds.items = d
  })
}

function onAddClick() {
  const current = new Role()
  dialog.value.showDialog(current)
}

function onDeleteClick(item: any) {
  del('role', item.id).then(() => {
    const i = ds.items.findIndex((u: any) => {
      return u.id == item.id
    })
    if (i > -1) {
      ds.items.splice(i, 1)
    }
  })
}

function onEditClick(item: any) {
  const current = new Role()
  copyObject(item, current)
  ds.currentRow = item
  dialog.value.showDialog(current)
}

function refreshFields(data: Array<IField>) {
  ds.fields = data
}

function refreshData(data: any) {
  const item = ds.items.find((u: any) => {
    return u.id == data.id
  })
  if (item) {
    copyObject(data, item)
  } else {
    datas.items.push(data)
  }
}
</script>

<template>
  <el-row justify="space-evenly">
    <el-col :span="4">
      <column-select
        :columns="[
          { prop: 'id', label: 'ID' },
          { prop: 'rolename', label: 'RoleName2' },
          { prop: 'description', label: 'Description' },
          { prop: 'updatetime', label: 'UpdateTime' },
          { prop: 'createtime', label: 'CreateTime' }
        ]"
        @columnSetting="refreshFields"
      />
    </el-col>
    <el-col :span="7">
      <sys-data-select v-model="qs.scheduletype" category="scheduletype" multiple />
    </el-col>
    <el-col :span="7">
      <sys-data-select v-model="qs.departmenttype" category="departmenttype" multiple />
    </el-col>
    <el-col :span="4">
      <el-button type="primary" @click="onFilterClick">{{ $t('button.filter') }}</el-button>
    </el-col>
  </el-row>

  <el-table :data="ds.items" stripe style="width: 100%" :empty-text="$t('label.emptydata')">
    <template v-for="f in ds.fields">
      <el-table-column v-if="f.key == 'operator'" :key="f.key + '_operator'">
        <template #header>
          <column-operator
            name="department"
            :fields="ds.fields"
            @refresh="refreshFields"
            @add="onAddClick"
            advance
          />
        </template>
        <template #default="scope">
          <el-button-group>
            <row-operator
              name="department"
              :title="scope.row.departmentname"
              @edit="onEditClick(scope.row)"
              @delete="onDeleteClick(scope.row)"
            />
          </el-button-group>
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="f.key == 'parentname'"
        :label="$t('label.parentname')"
        :key="f.key + '_parentname'"
        :width="f.width"
      >
        <template #default="scope">
          {{ ds.department.getParentName(scope.row.id) }}
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="f.key == 'scheduletype'"
        :label="$t('label.scheduletype')"
        :key="f.key + '_scheduletype'"
        :width="f.width"
      >
        <template #default="scope">
          {{ scope.row.scheduletype?$t("scheduletype." + scope.row.scheduletype):null }}
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="f.key == 'departmenttype'"
        :label="$t('label.departmenttype')"
        :key="f.key + '_departmenttype'"
        :width="f.width"
      >
        <template #default="scope">
          {{ scope.row.departmenttype?$t("departmenttype." + scope.row.departmenttype):null }}
        </template>
      </el-table-column>
      <el-table-column
        v-else
        :prop="f.key"
        :label="$t('label.' + f.key)"
        :key="f.key"
        :width="f.width"
      />
    </template>
  </el-table>
  <role-view-dialog ref="dialog" @addok="refreshData" @updateok="refreshData" />
</template>
